// 组件允许单个组件打包，因此默认引入公共基础样式

@import "../../base.less";

@import "./_var.less";

@import "./_mixin.less";

.@{prefix}-input {
  display: inline-block;
  width: 100%;
  position: relative;
  box-sizing: border-box;

  // 真正的输入框
  &__inner {
    height: @input-height-default;
    line-height: @input-height-default;
    .input-inner-base();
  }
  // 底部的额外消息
  &__extra {
    font-size: @input-extra-font-size;
    color: @input-extra-color-default;
  }

  // 输入框后面的状态图标
  &__status {
    position: absolute;
    right: @input-status-position-right;
    top: 0;
  }

  &.t-input--suffix > span.t-input__clear {
    opacity: 0;
    visibility: hidden;
    transition: @input-inner-transition;
  }

  &.t-input--suffix:hover > span.t-input__clear {
    opacity: 1;
    visibility: visible;
  }

  // 输入框状态
  .input-status(success);
  .input-status(warning);
  .input-status(error);
  .input-disabled();

  // 输入框的前置、后置图标
  .input-fix-position(prefix);
  .input-fix-position(suffix);

  .@{prefix}-input__suffix-clear {
    cursor: pointer;
  }

  // 输入框大小
  &.@{prefix}-size-l {

    & > .@{prefix}-input__inner {
      height: @input-height-l;
      line-height: @input-height-l;
      font-size: @input-font-size-l;
    }
  }

  &.@{prefix}-size-s {

    & > .@{prefix}-input__inner {
      height: @input-height-s;
      line-height: @input-height-s;
      font-size: @input-font-size-s;
    }
  }

  .@{prefix}-input__prefix,
  .@{prefix}-input__suffix {

    .@{prefix}-icon {
      font-size: @input-inner-icon-font-size;
    }
  }

  .@{prefix}-input__prefix {

    .@{prefix}-icon {
      color: @input-inner-prefix-icon-color;
    }
  }

  .@{prefix}-input__suffix {

    .@{prefix}-icon {
      color: @input-inner-suffix-icon-color;
    }
  }

  // 输入框被聚焦
  &.@{prefix}-is-focused {

    .@{prefix}-input__prefix,
    .@{prefix}-input__suffix:not(.@{prefix}-input__clear) {
      // 除了clear icon其他都在focus时变色
      .@{prefix}-icon {
        color: @input-border-color-default-focus;
      }
    }
  }
}

.@{prefix}-input-group {
  position: relative;
  display: inline-flex;
  align-items: stretch;

  .@{prefix}-input {

    .@{prefix}-input__inner {
      border-radius: 0;
    }

    &:first-child {

      .@{prefix}-input__inner {
        border-radius: @input-border-radius 0 0 @input-border-radius;
      }
    }

    &:last-child {

      .@{prefix}-input__inner {
        border-radius: 0 @border-radius @border-radius 0;
      }
    }
  }

  .@{prefix}-input,
  .@{prefix}-button,
  .@{prefix}-select {
    border-radius: 0;

    &:not(:first-child) {
      margin-left: @input-group-first-child-margin-left;
    }
  }

  .@{prefix}-button,
  .@{prefix}-select {
    &:first-child {
      border-radius: @input-border-radius 0 0 @input-border-radius;
    }

    &:last-child {
      border-radius: 0 @input-border-radius @input-border-radius 0;
    }
  }

  &--separate {

    .@{prefix}-input + .@{prefix}-input {
      margin-left: @input-margin-distance-default;
    }

    .@{prefix}-button,
    .@{prefix}-select {
      border-radius: @input-border-radius;

      &:first-child {
        border-radius: @input-border-radius 0 0 @input-border-radius;
      }

      &:last-child {
        border-radius: 0 @input-border-radius @input-border-radius 0;
      }
    }

    .@{prefix}-input {

      .@{prefix}-input__inner {
        border-radius: @input-border-radius;
      }

      &:first-child {

        .@{prefix}-input__inner {
          border-radius: @input-border-radius;
        }
      }

      &:last-child {

        .@{prefix}-input__inner {
          border-radius: @input-border-radius;
        }
      }
    }
  }

  .@{prefix}-input__inner,
  .@{prefix}-button,
  .@{prefix}-select {
    position: relative;
    z-index: 0;

    &:hover,
    &:focus,
    &:active {
      z-index: 1;
    }
  }
}

.@{prefix}-addon {
  line-height: normal;
  display: inline-table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;

  .addon-item(prepend);
  .addon-item(append);

  & > .@{prefix}-input {
    width: 100%;
    vertical-align: middle;
    display: table-cell;
  }

  &--prepend {

    & > .@{prefix}-input {

      .@{prefix}-input__inner {
        border-radius: 0 @input-border-radius @input-border-radius 0;
      }
    }
  }

  &--append {

    & > .@{prefix}-input {

      .@{prefix}-input__inner {
        border-radius: @input-border-radius 0 0 @input-border-radius;
      }
    }
  }

  &--prepend&--append {

    & > .@{prefix}-input {

      .@{prefix}-input__inner {
        border-radius: 0;
      }
    }
  }
}
